<div class="product-list-page">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>📦 产品管理</h2>
        <div>
            <button class="btn btn-success" onclick="productList.showImportDialog()">
                📥 批量导入
            </button>
            <button class="btn btn-primary" onclick="productList.showAddDialog()">
                ➕ 添加产品
            </button>
        </div>
    </div>

    <!-- 搜索区域 -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <input type="text" class="form-control" id="searchKeyword" placeholder="搜索产品名称或品牌">
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="searchCategory">
                        <option value="">全部类别</option>
                        <!-- 类别选项将从后端动态加载 -->
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="searchIsOurProduct">
                        <option value="">全部产品</option>
                        <option value="1">我方产品</option>
                        <option value="0">竞品</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="searchStatus">
                        <option value="">全部状态</option>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button class="btn btn-primary" onclick="productList.search()">🔍 搜索</button>
                    <button class="btn btn-secondary" onclick="productList.reset()">🔄 重置</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据表格 -->
    <div class="card">
        <div class="card-body">
            <table id="productTable" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th width="60">ID</th>
                        <th>产品名称</th>
                        <th width="100">品牌</th>
                        <th width="100">型号</th>
                        <th width="100">类别</th>
                        <th width="120">价格区间</th>
                        <th width="100">产品类型</th>
                        <th width="100">关注度</th>
                        <th width="80">状态</th>
                        <th width="150">创建时间</th>
                        <th width="220">操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- 添加/编辑产品对话框 -->
<div class="modal fade" id="productFormModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加产品</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="productForm">
                    <input type="hidden" id="productId">
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">产品名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="productName" required>
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label">品牌</label>
                            <input type="text" class="form-control" id="productBrand" placeholder="如：小米">
                        </div>
                        
                        <div class="col-md-3 mb-3">
                            <label class="form-label">型号</label>
                            <input type="text" class="form-control" id="productModel" placeholder="如：14 Pro">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">产品类别</label>
                            <select class="form-select" id="productCategory">
                                <option value="">请选择</option>
                                <!-- 类别选项将从后端动态加载 -->
                            </select>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label class="form-label">价格区间</label>
                            <input type="text" class="form-control" id="priceRange" placeholder="如：3000-4000">
                            <small class="text-muted">格式：最低价-最高价</small>
                        </div>
                        
                        <div class="col-md-4 mb-3">
                            <label class="form-label">产品类型 <span class="text-danger">*</span></label>
                            <select class="form-select" id="isOurProduct" required>
                                <option value="1">我方产品</option>
                                <option value="0">竞品</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row" id="competitorFields" style="display:none;">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">竞品级别</label>
                            <select class="form-select" id="competitorLevel">
                                <option value="">请选择</option>
                                <option value="direct">直接竞品</option>
                                <option value="indirect">间接竞品</option>
                                <option value="potential">潜在竞品</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">关注度</label>
                            <select class="form-select" id="focusLevel">
                                <option value="high">重点关注</option>
                                <option value="normal">一般关注</option>
                                <option value="low">低关注</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">关键词</label>
                        <input type="text" class="form-control" id="keywords" placeholder="多个关键词用逗号分隔，如：小米14Pro,MI14Pro,Xiaomi14Pro">
                        <small class="text-muted">用于AI回答中识别产品，多个关键词用逗号分隔</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">别名</label>
                        <input type="text" class="form-control" id="aliases" placeholder="多个别名用逗号分隔">
                        <small class="text-muted">产品的其他叫法，多个别名用逗号分隔</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">产品描述</label>
                        <textarea class="form-control" id="productDescription" rows="3"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">产品状态</label>
                            <select class="form-select" id="productStatus">
                                <option value="on_sale">在售</option>
                                <option value="discontinued">停售</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">记录状态</label>
                            <select class="form-select" id="status">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">备注</label>
                        <textarea class="form-control" id="productRemark" rows="2"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="productList.save()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 竞品配置对话框 -->
<div class="modal fade" id="competitorConfigModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">竞品配置</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <h6>我方产品：<span id="ourProductName" class="text-primary"></span></h6>
                </div>
                
                <!-- 竞品列表 -->
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>竞品名称</th>
                            <th>品牌</th>
                            <th>价格</th>
                            <th>竞争类型</th>
                            <th>竞争强度</th>
                            <th>竞争维度</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="competitorListBody">
                        <!-- 动态加载 -->
                    </tbody>
                </table>
                
                <button class="btn btn-success btn-sm" onclick="productList.showAddCompetitorDialog()">
                    ➕ 添加竞品
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加竞品关联对话框 -->
<div class="modal fade" id="addCompetitorModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加竞品关联</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addCompetitorForm">
                    <div class="mb-3">
                        <label class="form-label">选择竞品 <span class="text-danger">*</span></label>
                        <select class="form-select" id="competitorProductId" required>
                            <option value="">请选择竞品</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">竞争类型</label>
                        <select class="form-select" id="competitorType">
                            <option value="direct">直接竞品</option>
                            <option value="indirect">间接竞品</option>
                            <option value="potential">潜在竞品</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">竞争强度</label>
                        <select class="form-select" id="competitorStrength">
                            <option value="high">强</option>
                            <option value="medium">中</option>
                            <option value="low">弱</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">竞争维度</label>
                        <select class="form-select" id="competitorDimension">
                            <option value="all">全方位</option>
                            <option value="price">价格</option>
                            <option value="performance">性能</option>
                            <option value="brand">品牌</option>
                            <option value="feature">功能</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">备注</label>
                        <textarea class="form-control" id="competitorRemark" rows="2"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="productList.saveCompetitor()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 加载产品列表JS -->
<script src="/assets/js/pages/product-list.js?v=20251011-6"></script>

